<template>
  <div class="edit-password">
    <a-modal
      title="修改密码"
      :visible="visible"
      :maskClosable="false"
      :confirmLoading="confirmLoading"
      :width="400"
      @cancel="handleCancel"
      @ok="handleOk">
      <a-form-model ref="formRef" :model="form" v-bind="layout" :colon="false" :rules="rules">
        <a-form-model-item prop="password" label="新密码">
          <a-input v-model="form.password" type="password" />
        </a-form-model-item>
        <a-form-model-item prop="emailCode" label="邮箱验证码">
          <a-input v-model="form.emailCode" />
          <a-button :disabled="this.emailTime > 0" :loadin="emailCodeLoading" @click="handleEmailCode" class="code code-email">
            {{ this.emailTime === 0 ? '邮箱验证码' : `${this.emailTime}s` }}
          </a-button>

        </a-form-model-item>
        <a-form-model-item prop="code" label="验证码">
          <a-input v-model="form.code" />
          <div @click="handleCode" class="code"><img :src="code" alt="" srcset=""></div>

        </a-form-model-item>

      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getCode } from "@/api/common"
import md5 from 'md5'
import { editPassword, email } from "@/api/system/user"

export default {
  components: {

  },
  data () {
    return {
      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 14 },
      },
      visible: false,
      confirmLoading: false,
      form: {
        password: '',
        code: '',
        emailCode: ''
      },
      rules: {
        password: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
        emailCode: [{ required: true, message: '邮箱验证码不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      },
      code: getCode(),
      emailCodeLoading: false,
      emailTime: 0
    }
  },
  mounted () {
  },
  methods: {
    handleCancel() {
      this.$emit("cancel")
      this.reset()
    },
    handleOk() {
      this.$refs.formRef.validate()
      .then((bool) => {
        if (bool) {
          this.confirmLoading = true
          editPassword({
            ...this.form,
            password: md5(this.form.password)
          })
          .then(() => {
            this.$message.success("密码修改成功, 请重新登录, 正在跳转到登录页")
            this.$store.dispatch('Logout').then(() => {
              setTimeout(() => {
                this.$router.push({ name: 'login' })
                this.reset()
              }, 1500)
            })
            this.$emit("ok")
          })
          .catch(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    reset() {
      this.visible = false
      this.form = {
        password: '',
        code: '',
        emailCode: ''
      }
      this.$refs.formRef.resetFields()
    },
    handleCode() {
      this.code = getCode()
    },
    handleEmailCode() {
      this.emailCodeLoading = true
      email()
      .then(() => {
        this.emailCodeLoading = false
        this.$message.success("验证码邮件发送成功")
        this.emailTime = 60
        const emailTimer = setInterval(() => {
          this.emailTime--
          if (this.emailTime === 0) {
            clearInterval(emailTimer)
          }
        }, 1000)
      })
    },
    show() {
      this.visible = true
    }
  },

}
</script>

<style lang="less" scoped>
@import url("./index.less");

</style>
